<template>
  <div class="home">
    <el-container>
      <el-header>
        <img src="@/assets/Snipaste_2022-11-15_10-26-01.png" alt="">
        <el-button type="info" @click="outAy">退出</el-button>
      </el-header>
      <el-container>
        <el-aside :width="collapse ? '60px' : '200px'">
          <p @click="collapse = !collapse">| | |</p>
          <el-menu :default-active="active.path" class="el-menu-vertical-demo" background-color="#333744" text-color="#fff"
            active-text-color="blue" :collapse="collapse" unique-opened :collapse-transition="false" router>
            <el-submenu :index="item.id + ''" v-for="(item, index) in aside" :key="index">
              <template slot="title">
                <i :class="icons[index]"></i>
                <span>{{ item.authName }}</span>
              </template>
              <!-- 子菜单相 -->
              <el-menu-item :index="'/' + it.path" v-for="it in item.children" :key="it.id"
                @click="saveName(item.authName, it.authName, it.path)">
                <template slot="title">
                  <i class="el-icon-s-opportunity
"></i>
                  <span>{{ it.authName }}</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import getAside from '@/utils/asideApi.js';
export default {
  data() {
    return {
      collapse: false,
      icons: ['el-icon-user-solid', 'el-icon-user-solid', 'el-icon-s-goods', 'el-icon-success', 'el-icon-picture'],
      aside: [],  //左侧菜单栏数据
      active: JSON.parse(sessionStorage.getItem('menu')) || {}
    }
  },
  methods: {
    /* 获取左侧菜单栏数据 */
    async getAside() {
      let res = await getAside();
      this.aside = res.data;
      /* 将数据提取出来展示出动态路由的样子 */
      var route = [];
      // console.log(this.aside)
      this.aside.forEach((item) => {
        item.children.forEach(it => {
          var obj = {
            path: '/' + it.path,
            name: it.path.charAt(0).toUpperCase() + it.path.slice(1)
          }
          route.push(obj);
        })
      })
      // console.log(route);
      /* 添加到vuex */
      this.$store.commit('routeModule/addRoute', route);
    },
    /* 存储导航 */
    saveName(oneName, twoName, path) {
      // console.log(123456);
      let obj = { oneName, twoName, path };
      sessionStorage.setItem('menu', JSON.stringify(obj));
    },
    /* 退出 */
    outAy() {
      this.getToken({});
      this.$store.commit('routeModule/addRoute', [])
      this.$router.push('/login');
    },
  },
  mounted() {
    this.getAside();
  }
}
</script>

<style lang="scss" >
.home {
  width: 100%;
  height: 100%;
  min-width: 1000px;

  &>.el-container {
    height: 100%;

    .el-header {
      background-color: #373d41;
      display: flex;
      justify-content: space-between;
      align-items: center;

      img {
        width: 25%;
      }
    }

    .el-container {
      .el-aside {
        background-color: #333744;

        p {
          width: 100%;
          line-height: 40px;
          color: white;
          text-align: center;
        }
      }

      .el-main {
        background-color: #eaedf1;
      }
    }
  }
}
</style>